<template>
  <div>
    <div class="category">
      <div class="category-nav">
        <div class="nav-left">
          <i
            class="iconfont icon-xiangzuojiantou"
            @click="$router.go('-1')"
          ></i>
        </div>
        <div class="nav-center">
          <span>菜谱分类</span>
        </div>
        <div class="nav-right">
          <i class="iconfont icon-sousuo2" @click="$router.push('/search')"></i>
        </div>
      </div>
      <div class="category-content">
        <div class="content-left" ref="left">
          <ul>
            <li
              v-for="(item, index) in leftList"
              :key="index"
              @click="selectItem(index, $event)"
              :class="{ current: currentIndex == index }"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="content-right" ref="right">
          <ul>
            <li
              v-for="(item, index) in leftList"
              :key="index"
              class="right_item"
            >
              <div class="li-title">
                <div class="title-left">
                  <span>{{ item.name }}</span>
                  <i class="iconfont icon-youjiantou"></i>
                </div>
                <div class="title-img">
                  <img
                    src="https://cp1.douguo.com/upload/caiku/4/4/6/600_441fead89aa236ec68176fd05a5e69c6.jpeg"
                    alt=""
                  />
                </div>
              </div>
              <div class="li-content">
                <span v-for="(k, i) in item.cs" :key="i">
                  {{ k.name }}
                </span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getRecipeFlatcatalogs } from "../../api/home/category";
import BScroll from "@better-scroll/core";
export default {
  data() {
    return {
      // list:[
      //   {
      //     id: "1",
      //     name: "热门",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       },
      //       {
      //         id: "16",
      //         name:"下饭菜",
      //         cs:[],
      //       },
      //       {
      //         id: "17",
      //         name:"快手菜",
      //         cs:[],
      //       },
      //       {
      //         id: "18",
      //         name:"减肥食谱",
      //         cs:[],
      //       },
      //     ]
      //   },
      //   {
      //     id: "2",
      //     name: "蔬菜",
      //     cs:[
      //       {
      //         id: "19",
      //         name:"时令蔬菜",
      //         cs:[],
      //       },
      //       {
      //         id: "20",
      //         name:"绿叶蔬菜",
      //         cs:[],
      //       },
      //       {
      //         id: "21",
      //         name:"瓜类",
      //         cs:[],
      //       },
      //       {
      //         id: "22",
      //         name:"菌类",
      //         cs:[],
      //       },
      //       {
      //         id: "23",
      //         name:"豆科",
      //         cs:[],
      //       },
      //       {
      //         id: "24",
      //         name:"根茎蔬菜",
      //         cs:[],
      //       },
      //     ]
      //   },
      //   {
      //     id: "3",
      //     name: "肉类大全",
      //     cs:[
      //       {
      //         id: "26",
      //         name:"猪肉",
      //         cs:[],
      //       },
      //       {
      //         id: "27",
      //         name:"鸡肉",
      //         cs:[],
      //       },
      //       {
      //         id: "28",
      //         name:"牛肉",
      //         cs:[],
      //       },
      //       {
      //         id: "29",
      //         name:"羊肉",
      //         cs:[],
      //       },
      //       {
      //         id: "30",
      //         name:"其他",
      //         cs:[],
      //       },
      //     ]
      //   },
      //   {
      //     id: "4",
      //     name: "主食",
      //     cs:[
      //       {
      //         id: "31",
      //         name:"面食",
      //         cs:[],
      //       },
      //       {
      //         id: "32",
      //         name:"饼",
      //         cs:[],
      //       },
      //       {
      //         id: "33",
      //         name:"西式主食",
      //         cs:[],
      //       },
      //       {
      //         id: "34",
      //         name:"粥",
      //         cs:[],
      //       },
      //       {
      //         id: "35",
      //         name:"米饭",
      //         cs:[],
      //       },
      //     ]
      //   },
      //   {
      //     id: "5",
      //     name: "菜式菜系",
      //     cs:[
      //       {
      //         id: "36",
      //         name:"菜式",
      //         cs:[],
      //       },
      //       {
      //         id: "37",
      //         name:"中国菜",
      //         cs:[],
      //       },
      //       {
      //         id: "38",
      //         name:"外国菜",
      //         cs:[],
      //       },
      //     ]
      //   },
      //   {
      //     id: "6",
      //     name: "水产海鲜",
      //     cs:[
      //       {
      //         id: "39",
      //         name:"虾",
      //         cs:[],
      //       },
      //     ]
      //   },
      //   {
      //     id: "7",
      //     name: "烘焙",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "8",
      //     name: "蛋奶豆制品",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "9",
      //     name: "食疗养生",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "10",
      //     name: "厨具",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "11",
      //     name: "母婴",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "12",
      //     name: "烹饪方法",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "13",
      //     name: "米面杂粮",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      //   {
      //     id: "14",
      //     name: "口味",
      //     cs:[
      //       {
      //         id: "15",
      //         name:"家常菜",
      //         cs:[],
      //       }
      //     ]
      //   },
      // ],
      leftList: [],
      listsHeight: [], //存储高度
      scrollY: null, //滚动坐标
    };
  },
  methods: {
    //获取分类数据
    getRecipeFlatcatalogsFun() {
      getRecipeFlatcatalogs().then((data) => {
        console.log("分类数据", data.result);

        this.leftList = data.result.cs;
      });
    },

    // 滚动效果初始化方法
    _initScroll() {
      // 左侧滚动效果初始化
      this.lefts = new BScroll(this.$refs.left, {
        click: true, //开启点击事件
        probeType: 3, //深针的效果,实时获取滚动高度
      });

      // 右侧滚动效果初始化
      this.rights = new BScroll(this.$refs.right, {
        probeType: 3, //深针的效果,实时获取滚动高度
      });

      // 获取滚动高度
      this.rights.on("scroll", (pos) => {
        // console.log(Math.abs(Math.round(pos.y))); //当前滚动条高度
        this.scrollY = Math.abs(Math.round(pos.y));
        // console.log(this.scrollY);
      });
    },
    // 获取右侧每一个li高度
    _getHeight() {
      // 获取右侧对象
      let rightItems = this.$refs.right.getElementsByTagName("li");
      // console.log(this.$refs.right);
      let height = 0;
      this.listsHeight.push(height);
      for (let i = 0; i < rightItems.length; i++) {
        let item = rightItems[i];
        height += item.clientHeight; //获取高度
        this.listsHeight.push(height);
      }
      // console.log(this.listsHeight);
    },
    // 左侧点击效果
    selectItem(index, event) {
      // console.log(index);
      if (!event._constructed) {
        //如果不存在这个属性,则为原声点击事件,不执行下面函数
        return;
      } else {
        // 获取右侧所有对象
        let rightItems = this.$refs.right.getElementsByTagName("li");
        let el = rightItems[index]; // 左侧点击位置,对应右侧滚动对象
        // 滚动指定目标对象
        // scrollToElement(el, time, offsetX, offsetY, easing)
        this.rights.scrollToElement(el, 300);
      }
    },
    //点击跳转到搜索页面并根据内容进行搜索
    // jumpFun(index) {
    //   console.log("486564864");
    //   this.$router.push("/search");
    //   this.keyword = this.leftList[index].title;
    // },
  },
  created() {
    this.getRecipeFlatcatalogsFun();
  },
  mounted() {
    this.$nextTick(() => {
      this._initScroll();
    });
  },
  // 计算属性
  computed: {
    currentIndex() {
      for (let i = 0; i < this.listsHeight.length; i++) {
        let height = this.listsHeight[i];
        let height2 = this.listsHeight[i + 1];

        if (!height2 || (this.scrollY >= height && this.scrollY < height2)) {
          // 获取左侧li对象
          let leftItems = this.$refs.left.getElementsByTagName("li");
          this.lefts.scrollToElement(leftItems[i], this.scrollY);
          return i;
        }
      }
      return 0;
    },
  },
  watch: {
    leftList() {
      this.$nextTick(() => {
        this._initScroll();
        this._getHeight();
      });
    },
  },
};
</script>

<style lang="less">
.category {
  .category-nav {
    height: 55px;
    line-height: 55px;
    font-weight: bold;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    .nav-left {
      margin-left: 22px;
      i {
        font-size: 20px;
      }
    }
    .nav-center {
      margin-left: 100px;
      span {
        font-size: 18px;
      }
    }
    .nav-right {
      margin-left: 123px;
      margin-right: 20px;
      i {
        font-size: 18px;
      }
    }
  }
  .category-content {
    height: 611px;
    overflow: hidden;
    display: flex;
    .content-left {
      width: 95px;
      // height: auto;
      ul {
        li {
          height: 55.5px;
          line-height: 55.5px;
          text-align: center;
          font-size: 16px;
          background-color: #f6f6f6;
          position: relative;
        }
        .current {
          font-weight: bold;
          background-color: #fff;
        }
        .current::after {
          display: block;
          content: "";
          width: 5px;
          height: 20px;
          background-color: #fbbc19;
          border-radius: 3px;
          position: absolute;
          margin: auto;
          right: 5px;
          top: 0;
          bottom: 0;
        }
      }
    }
    .content-right {
      ul {
        li {
          .li-title {
            width: 245px;
            height: 55px;
            line-height: 55px;
            margin: 12px 20px 0px 15px;
            background-color: #fffce9;
            display: flex;
            justify-content: space-around;
            .title-left {
              color: #666342;
              span {
                font-size: 14px;
              }
              i {
                margin-left: 5px;
                font-size: 12px;
              }
            }
            .title-img {
              width: 45px;
              height: 45px;
              border-radius: 50%;
              background-color: #ccc;
              margin-top: 2px;
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
          .li-content {
            width: 245px;
            height: auto;
            margin: 12px 20px 0px 12px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            span {
              margin: 10px 0px 0px 8px;
              font-size: 14px;
              color: #333;
              padding: 5px 10px;
              border: 1px solid #f6f6f6;
              border-radius: 5px;
              background-color: #fefefe;
            }
          }
        }
        li:last-of-type {
          height: 611px;
        }
      }
    }
  }
}
</style>